<template>
  <div class="hy-form">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form
      :label-width="labelWidth"
      :label-position="labelPosition"
      :model="modelValue"
      ref="ruleForm"
    >
      <el-row>
        <el-col v-bind="colLayout" v-for="item in formItems" :key="item.label">
          <el-form-item
            :label="item.label"
            :style="itemStyle"
            v-if="!item.isHidden"
            :rules="item.rules ? item.rules : []"
            :prop="item.field"
          >
            <template v-if="item.type === 'input' || item.type === 'password'">
              <el-input
                :placeholder="item.placeholder"
                :show-password="item.type === 'password'"
                v-bind="item.otherOptions"
                v-model="modelValue[`${item.field}`]"
                @change="handleValueChange($event, item.field)"
              ></el-input>
            </template>
            <template v-else-if="item.type === 'select'">
              <el-select
                :placeholder="item.placeholder"
                v-bind="item.otherOptions"
                style="width: 100%"
                v-model="modelValue[`${item.field}`]"
                @change="handleValueChange($event, item.field)"
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.value"
                  :value="option.value"
                  :label="option.title"
                  >{{ option.title }}</el-option
                >
              </el-select>
            </template>
            <template v-else-if="item.type === 'datepicker'">
              <el-date-picker
                style="width: 100%"
                v-bind="item.otherOptions"
                v-model="modelValue[`${item.field}`]"
                @change="handleValueChange($event, item.field)"
              ></el-date-picker>
            </template>
            <!-- //多选框 -->
            <template v-else-if="item.type === 'checkbox'">
              <el-checkbox
                :label="option.title"
                :name="option.value"
                v-for="option in item.options"
                :key="option.value"
                v-bind="item.otherOptions"
                @change="handleValueChange($event, item.field)"
              >
              </el-checkbox>
            </template>
            <!-- 单选框 -->
            <template v-else-if="item.type === 'radio'">
              <el-radio-group
                v-bind="item.otherOptions"
                v-model="modelValue[`${item.field}`]"
              >
                <el-radio
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.value"
                  >{{ option.title }}</el-radio
                >
              </el-radio-group>
            </template>
            <!-- 计数器 -->
            <template v-else-if="item.type === 'number'">
              <el-input-number
                v-bind="item.otherOptions"
                v-model="modelValue[`${item.field}`]"
                @change="handleValueChange($event, item.field)"
              ></el-input-number>
            </template>
            <!-- //图片 -->
            <template v-else-if="item.type === 'img'">
              <slot name="img" :row="item"></slot>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelValue',
    event: 'update:modelValue'
  },
  props: {
    modelValue: {
      type: Object,
      required: true
    },
    formItems: {
      type: Array,
      default: () => []
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    itemStyle: {
      type: Object,
      default: () => ({ padding: '10px 40px' })
    },
    colLayout: {
      type: Object,
      default: () => ({
        xl: 6, // >1920px 4个
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      })
    }
  },
  data() {
    return {}
  },
  methods: {
    submitForm() {
      let bool = false
      this.$refs.ruleForm.validate((valid) => {
        bool = valid
      })
      return bool
    },
    clearValidate() {
      // 移除该表单项的校验结果
      this.$refs.ruleForm.clearValidate()
    },
    handleValueChange(value, field) {
      // console.log(value, field, this.modelValue)

      this.$emit('update:modelValue', { ...this.modelValue, [field]: value })
    }
  }
}
</script>

<style scoped></style>
